<template>
  <view class="line-detail-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-left">
        <uni-icons type="left" size="20" color="#333" @click="goBack"></uni-icons>
        <text class="page-title">{{ transferCode }}</text>
      </view>
    </view>

    <!-- 调拨明细 -->
    <view class="line-overview" v-if="lineInfo">
      <view class="overview-header">
        <view class="header-left">
          <text class="overview-title">调拨明细</text>
          <view class="line-status" :class="getLineStatusClass()">
            {{ getLineStatusText() }}
          </view>
        </view>
      </view>
      
      <view class="overview-content">
        <view class="content-grid">
          <view class="grid-item">
            <text class="item-label">物料名称</text>
            <text class="item-value">{{ lineInfo.itemName }}</text>
          </view>
          <view class="grid-item">
            <text class="item-label">物料编码</text>
            <text class="item-value">{{ lineInfo.itemCode }}</text>
          </view>
          <view class="grid-item">
            <text class="item-label">规格型号</text>
            <text class="item-value">{{ lineInfo.specification }}</text>
          </view>
            <view class="grid-item">
              <text class="item-label">转移数量</text>
              <text class="item-value">{{ lineInfo.quantityTransfer }} {{ lineInfo.unitName || '' }}</text>
            </view>
          <view class="grid-item" v-if="lineInfo.batchCode">
            <text class="item-label">批次号</text>
            <text class="item-value">{{ lineInfo.batchCode }}</text>
          </view>
          <view class="grid-item">
            <text class="item-label">调出仓库</text>
            <text class="item-value">{{ lineInfo.outWarehouseName || '-' }}</text>
          </view>
          <view class="grid-item">
            <text class="item-label">调入仓库</text>
            <text class="item-value">{{ lineInfo.inWarehouseName || '-' }}</text>
          </view>
          <view class="grid-item progress-item">
            <text class="item-label">拣货进度</text>
            <view class="progress-info">
              <text class="progress-text">已拣货 {{ getSentCount() }}/{{ getTotalCount() }} {{ lineInfo.unitName || '' }}</text>
              <view class="progress-bar">
                <view 
                  class="progress-fill" 
                  :style="{ width: getProgressWidth() + '%' }"
                ></view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>


    <!-- 添加拣货按钮 -->
    <view class="add-picking-section" v-if="lineInfo && canAddPicking">
      <button 
        class="add-picking-btn" 
        @click="showPickingModal"
      >
        <uni-icons type="plusempty" size="18" color="#fff"></uni-icons>
        <text class="btn-text">添加拣货明细</text>
      </button>
    </view>

    <!-- 明细列表 -->
    <view class="details-section" v-if="transferDetails.length > 0">
      <view class="section-header">
        <text class="section-title">明细列表</text>
        <text class="section-count">共 {{ transferDetails.length }} 条</text>
      </view>
      
      <view class="details-list">
        <view 
          class="detail-item" 
          v-for="(detail, index) in transferDetails" 
          :key="detail.detailId"
        >
          <view class="item-header">
            <view class="item-title">
              <text class="item-number">#{{ index + 1 }}</text>
              <text class="item-identifier">{{ getItemIdentifier(detail) }}</text>
            </view>
            <view class="item-status" :class="getItemStatusClass(detail.itemStatus)">
              {{ getItemStatusText(detail.itemStatus) }}
            </view>
          </view>
          
          <view class="item-info-grid">
            <view class="info-row">
              <text class="info-label">数量</text>
              <text class="info-value">{{ detail.quantity }} {{ detail.unitName || '' }}</text>
            </view>
            <view class="info-row" v-if="detail.batchCode">
              <text class="info-label">批次号</text>
              <text class="info-value">{{ detail.batchCode }}</text>
            </view>
            <view class="info-row" v-if="detail.sn">
              <text class="info-label">SN</text>
              <text class="info-value">{{ detail.sn }}</text>
            </view>
          </view>
          
          <!-- 拣货信息 -->
          <view class="shipment-info">
            <view class="info-section-title">
              <uni-icons type="paperplane" size="14" color="#007AFF"></uni-icons>
              <text>拣货信息</text>
            </view>
            <view class="info-grid">
              <view class="info-item" v-if="detail.outWarehouseName">
                <text class="info-label">拣货仓库</text>
                <text class="info-value">{{ detail.outWarehouseName }}</text>
              </view>
              <view class="info-item" v-if="detail.outLocationName">
                <text class="info-label">拣货库区</text>
                <text class="info-value">{{ detail.outLocationName }}</text>
              </view>
              <view class="info-item" v-if="detail.outAreaCode">
                <text class="info-label">拣货库位</text>
                <text class="info-value">{{ detail.outAreaCode }}</text>
              </view>
              <view class="info-item" v-if="detail.shipConfirmUserName">
                <text class="info-label">拣货人</text>
                <text class="info-value">{{ detail.shipConfirmUserName }}</text>
              </view>
              <view class="info-item" v-if="detail.shipTime">
                <text class="info-label">拣货时间</text>
                <text class="info-value">{{ formatTime(detail.shipTime) }}</text>
              </view>
            </view>
          </view>
          
          <view class="item-actions" v-if="detail.itemStatus === 0 && canOperateDetail">
            <button 
              class="action-btn edit-btn" 
              @click.stop="editDetail(detail)"
            >
              <uni-icons type="compose" size="14" color="#fff"></uni-icons>
              编辑
            </button>
            <button 
              class="action-btn delete-btn" 
              @click.stop="deleteDetail(detail)"
            >
              <uni-icons type="trash" size="14" color="#fff"></uni-icons>
              删除
            </button>
            <button 
              class="action-btn send-btn" 
              @click.stop="pickingSingleItem(detail)"
            >
              <uni-icons type="cart" size="14" color="#fff"></uni-icons>
              拣货确认
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="transferDetails.length === 0">
      <uni-icons type="inbox" size="60" color="#ccc"></uni-icons>
      <text class="empty-text">暂无明细数据</text>
    </view>

    <!-- 拣货模态框 -->
    <view class="picking-modal" v-if="showPicking" @click="hidePickingModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">{{ detailForm.detailId ? '编辑调拨单明细' : '添加调拨单明细' }}</text>
          <uni-icons type="close" size="20" color="#999" @click="hidePickingModal"></uni-icons>
        </view>
        
        <view class="modal-body">
          <!-- 物料信息区域 -->
          <view class="material-section">
            <view class="section-title">物料信息</view>
            
            <!-- 物资编码独占一行 -->
            <view class="form-group">
              <text class="form-label">物资编码</text>
              <view class="form-input-group">
                <input 
                  class="form-input" 
                  v-model="detailForm.itemCode"
                  placeholder="选择库存物资"
                  readonly
                />
                <button 
                  class="search-btn" 
                  @click="showMaterialSelector"
                >
                  <uni-icons type="search" size="16" color="#007AFF"></uni-icons>
                </button>
              </view>
            </view>
            
            <!-- 物资名称和单位占一行 -->
            <view class="form-row">
              <view class="form-group half-width">
                <text class="form-label">物资名称</text>
                <input 
                  class="form-input" 
                  v-model="detailForm.itemName"
                  placeholder="物资名称"
                  readonly
                />
              </view>
              
              <view class="form-group half-width">
                <text class="form-label">单位</text>
                <input 
                  class="form-input" 
                  v-model="detailForm.unitName"
                  placeholder="单位"
                  readonly
                />
              </view>
            </view>
            
            <!-- 规格型号、批次号、SN各占一行 -->
            <view class="form-group" v-if="detailForm.specification">
              <text class="form-label">规格型号</text>
              <input 
                class="form-input" 
                v-model="detailForm.specification"
                placeholder="规格型号"
                readonly
              />
            </view>
            
            <view class="form-group" v-if="detailForm.batchCode">
              <text class="form-label">批次号</text>
              <input 
                class="form-input" 
                v-model="detailForm.batchCode"
                placeholder="批次号"
                readonly
              />
            </view>
            
            <view class="form-group" v-if="detailForm.sn">
              <text class="form-label">SN</text>
              <input 
                class="form-input" 
                v-model="detailForm.sn"
                placeholder="序列号"
                readonly
              />
            </view>
            
          </view>
          
          <!-- 出库仓库信息 -->
          <view class="warehouse-section">
            <view class="section-title">出库仓库信息</view>
            
            <view class="form-row">
              <view class="form-group half-width">
                <text class="form-label">出库仓库</text>
                <input 
                  class="form-input" 
                  v-model="detailForm.outWarehouseName"
                  placeholder="出库仓库"
                  readonly
                />
              </view>
              
              <view class="form-group half-width">
                <text class="form-label">出库库区</text>
                <input 
                  class="form-input" 
                  v-model="detailForm.outLocationName"
                  placeholder="出库库区"
                  readonly
                />
              </view>
            </view>
            
            
            <!-- 库位跟数量占一行 -->
            <view class="form-row">
              <view class="form-group half-width">
                <text class="form-label">出库库位编码</text>
                <input 
                  class="form-input" 
                  v-model="detailForm.outAreaCode"
                  placeholder="出库库位编码"
                  readonly
                />
              </view>
              
              <view class="form-group half-width required">
                <text class="form-label">转移数量</text>
                <view class="quantity-input">
                  <button class="quantity-btn" @click="decreaseQuantity">-</button>
                  <input 
                    class="quantity-value" 
                    v-model.number="detailForm.quantity"
                    type="number"
                    min="1"
                  />
                  <button class="quantity-btn" @click="increaseQuantity">+</button>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 备注 -->
          <view class="form-group">
            <text class="form-label">备注</text>
            <textarea 
              class="form-textarea" 
              v-model="detailForm.remark"
              placeholder="请输入备注"
            ></textarea>
          </view>
        </view>
        
        <view class="modal-footer">
          <button class="modal-btn cancel-btn" @click="hidePickingModal">关闭</button>
          <button class="modal-btn confirm-btn" @click="saveDetail">确定</button>
        </view>
      </view>
    </view>

    <!-- 物资选择组件 -->
    <material-selector
      :visible="showMaterialSelectorModal"
      :line-params="lineParams"
      @confirm="handleMaterialConfirm"
      @close="hideMaterialSelector"
    />
  </view>
</template>

<script>
import { 
  getDetail,
  addTransferdetail,
  updateTransferdetail,
  delTransferdetail,
  syncStock,
  detailShipConfirm,
  receiveConfirm,
} from '@/api/wm/transfer.js'
import MaterialSelector from '@/components/material/material-selector.vue'

export default {
  name: 'TransferDetailSend',
  components: {
    MaterialSelector
  },
  data() {
    return {
      lineId: '',
      transferCode: '',
      transferId: '',
      transferStatus: '', // 调拨单状态
      lineInfo: null,
      transferDetails: [],
      loading: false,
      
      // 拣货相关
      showPicking: false,
      detailForm : {
        detailId: null,//明细id 修改时用到
        lineId: this.lineId,
        transferId: this.transferId,
        itemId: null,
        itemCode: null,
        itemName: null,
        specification: null,
        unitOfMeasure: null,
        unitName: null,
        quantity: null, //发出数量
        batchId: null,
        batchCode: null,
        sn: null,
        outWarehouseId: null,
        outWarehouseCode: null,
        outWarehouseName: null,
        outLocationId: null,
        outLocationCode: null,
        outLocationName: null,
        outAreaId: null,
        outAreaCode: null,
        outAreaName: null,
        remark: null,
        fSnId: null,//追溯用的id
      },
      // 物料选择器相关
      showMaterialSelectorModal: false
    }
  },
  
  computed: {
    // 传递给物资选择组件的行明细参数
    lineParams() {
      if (!this.lineInfo) return {}
      
      return {
        itemId: this.lineInfo.itemId,
        itemCode: this.lineInfo.itemCode,
        itemName: this.lineInfo.itemName,
        warehouseId: this.lineInfo.outWarehouseId,
        warehouseName: this.lineInfo.outWarehouseName,
        batchCode: this.lineInfo.batchCode,
        specification: this.lineInfo.specification
      }
    },
    
    // 是否可以添加拣货（根据调拨单状态判断）
    canAddPicking() {
      // 只有APPROVED状态可以添加拣货明细
      return this.transferStatus === 'APPROVED'
    },
    
    // 是否可以操作明细（编辑、删除、拣货确认）
    canOperateDetail() {
      // 只有APPROVED状态可以操作明细
      return this.transferStatus === 'APPROVED'
    }
  },
  
  onLoad(options) {
    if (options.lineId) {
      this.lineId = options.lineId
    }
    if (options.transferCode) {
      this.transferCode = options.transferCode
    }
    if (options.transferId) {
      this.transferId = options.transferId
    }
    if (options.transferStatus) {
      this.transferStatus = options.transferStatus
    }
    this.loadLineDetails()
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 格式化时间
    formatTime(time) {
      if (!time) return '-'
      const d = new Date(time)
      const y = d.getFullYear()
      const M = String(d.getMonth() + 1).padStart(2, '0')
      const D = String(d.getDate()).padStart(2, '0')
      const h = String(d.getHours()).padStart(2, '0')
      const m = String(d.getMinutes()).padStart(2, '0')
      const s = String(d.getSeconds()).padStart(2, '0')
      return `${y}-${M}-${D} ${h}:${m}:${s}`
    },
    
    // 加载行明细数据
    loadLineDetails(showLoading = true, showSuccessToast = false) {
      if (!this.lineId) {
        uni.showToast({ title: '数据异常，请刷新后重试', icon: 'none' })
        return
      }
      
      if (showLoading) {
        uni.showLoading({ title: '加载中...' })
      }
      this.loading = true
      
      getDetail(this.lineId).then(response => {
        const data = response.data
        this.lineInfo = data.transferLine || {}
        
        // 对明细列表按itemStatus排序：未处理(0)排在前面，已处理(1,2)排在后面
        const details = data.transferDetails || []
        this.transferDetails = details.sort((a, b) => {
          // 未处理(0)的排在前面
          if (a.itemStatus === 0 && b.itemStatus !== 0) return -1
          if (a.itemStatus !== 0 && b.itemStatus === 0) return 1
          // 同状态保持原顺序，返回0表示不改变相对位置
          return 0
        })
        
        if (showSuccessToast) {
          uni.showToast({ title: '加载成功', icon: 'success' })
        }
      }).catch(error => {
        console.log('加载明细失败:', error)
        
        if (error === '500') {
          console.log('业务错误，拦截器已显示toast')
        } else {
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
        
        this.lineInfo = null
        this.transferDetails = []
      }).finally(() => {
        if (showLoading) {
          uni.hideLoading()
        }
        this.loading = false
      })
    },
    
    // 拣货单个项目
    pickingSingleItem(detail) {
      uni.showModal({
        title: '确认拣货',
        content: '是否确认拣货?',
        confirmText: '确认',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            this.executePickingConfirm(detail)
          }
        }
      })
    },
    
    // 执行拣货确认
    executePickingConfirm(detail) {
      uni.showLoading({ title: '确认中...' })
      
      detailShipConfirm(detail.detailId).then(response => {
        uni.showToast({ 
          title: '拣货确认成功', 
          icon: 'success',
          duration: 2000
        })
        
        detail.itemStatus = 1
        this.loadLineDetails(false, false)
      }).catch(error => {
        console.log('拣货确认失败:', error)
        
        if (error === '500') {
          console.log('业务错误，拦截器已显示toast')
        } else {
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
      }).finally(() => {
        uni.hideLoading()
      })
    },
    
    // 获取已发出数量
    getSentCount() {
      if (!this.transferDetails || this.transferDetails.length === 0) return 0
      return this.transferDetails
        .filter(detail => detail.itemStatus === 1 || detail.itemStatus === 2)
        .reduce((total, detail) => total + (detail.quantity || 0), 0)
    },
    
    // 获取总数量
    getTotalCount() {
      if (!this.lineInfo || !this.lineInfo.quantityTransfer) return 0
      return this.lineInfo.quantityTransfer
    },
    
    // 获取进度百分比
    getProgressWidth() {
      const totalCount = this.getTotalCount()
      if (totalCount === 0) return 0
      const sentCount = this.getSentCount()
      return Math.round((sentCount / totalCount) * 100)
    },
    
    // 获取已收货数量
    getReceivedCount() {
      if (!this.transferDetails || this.transferDetails.length === 0) return 0
      return this.transferDetails
        .filter(detail => detail.itemStatus === 2)
        .reduce((total, detail) => total + (detail.quantity || 0), 0)
    },
    
    // 获取行状态文本
    getLineStatusText() {
      const totalCount = this.getTotalCount()
      const sentCount = this.getSentCount()
      const receivedCount = this.getReceivedCount()
      
      if (totalCount === 0) {
        return '无明细'
      }
      
      if (receivedCount === totalCount) {
        return '已收货'
      } else if (sentCount === totalCount) {
        return '已拣货'
      } else if (sentCount > 0) {
        return '部分拣货'
      } else {
        return '待拣货'
      }
    },
    
    // 获取行状态样式
    getLineStatusClass() {
      const totalCount = this.getTotalCount()
      const sentCount = this.getSentCount()
      const receivedCount = this.getReceivedCount()
      
      if (totalCount === 0) {
        return 'status-no-details'
      }
      
      if (receivedCount === totalCount) {
        return 'status-received'
      } else if (sentCount === totalCount) {
        return 'status-completed'
      } else if (sentCount > 0) {
        return 'status-partial'
      } else {
        return 'status-pending'
      }
    },
    
    // 获取项目状态文本
    getItemStatusText(itemStatus) {
      const map = {
        0: '待拣货',
        1: '已拣货',
        2: '已收货'
      }
      return map[itemStatus] || '未知状态'
    },
    
    // 获取项目状态样式
    getItemStatusClass(itemStatus) {
      const map = {
        0: 'status-pending',
        1: 'status-sent',
        2: 'status-received'
      }
      return map[itemStatus] || 'status-default'
    },
    
    // 获取项目标识符
    getItemIdentifier(detail) {
      if (detail.sn) {
        return detail.sn
      }
      
      if (detail.batchCode) {
        return `批次: ${detail.batchCode}`
      }
      
      return '物料维度'
    },
    
    // 拣货相关方法
    
    // 显示拣货模态框
    showPickingModal() {
      this.resetDetailForm()
      this.showPicking = true
    },
    
    // 隐藏拣货模态框
    hidePickingModal() {
      this.showPicking = false
      this.resetDetailForm()
    },
    
    // 重置拣货表单
    resetDetailForm() {
      this.detailForm = {
        detailId: null,
        lineId: this.lineId,
        transferId: this.transferId,
        itemId: null,
        itemCode: null,
        itemName: null,
        specification: null,
        unitOfMeasure: null,
        unitName: null,
        quantity: 0,
        batchId: null,
        batchCode: null,
        sn: null,
        outWarehouseId: null,
        outWarehouseCode: null,
        outWarehouseName: null,
        outLocationId: null,
        outLocationCode: null,
        outLocationName: null,
        outAreaId: null,
        outAreaCode: null,
        outAreaName: null,
        remark: null,
        fSnId: null,
      }
    },
    
    // 显示物料选择器
    showMaterialSelector() {
      this.showMaterialSelectorModal = true
    },
    
    // 隐藏物料选择器
    hideMaterialSelector() {
      this.showMaterialSelectorModal = false
    },
    
    // 库存选择回调
    handleMaterialConfirm(obj) {
      if (obj != undefined && obj != null) {
        this.detailForm.outWarehouseId = obj.warehouseId
        this.detailForm.outWarehouseCode = obj.warehouseCode
        this.detailForm.outWarehouseName = obj.warehouseName
        this.detailForm.outLocationId = obj.locationId
        this.detailForm.outLocationCode = obj.locationCode
        this.detailForm.outLocationName = obj.locationName
        this.detailForm.outAreaId = obj.areaId
        this.detailForm.outAreaCode = obj.areaCode
        this.detailForm.outAreaName = obj.areaName
        
        this.detailForm.itemId = obj.itemId
        this.detailForm.itemCode = obj.itemCode
        this.detailForm.itemName = obj.itemName
        this.detailForm.specification = obj.specification
        this.detailForm.unitOfMeasure = obj.unitOfMeasure
        this.detailForm.unitName = obj.unitName
        
        this.detailForm.sn = obj.sn
        this.detailForm.batchId = obj.batchId
        this.detailForm.batchCode = obj.batchCode
        
        uni.showToast({ title: '物料选择成功', icon: 'success' })
      }
    },
    
    // 增加数量
    increaseQuantity() {
      if (this.detailForm.quantity < 999) {
        this.detailForm.quantity++
      }
    },
    
    // 减少数量
    decreaseQuantity() {
      if (this.detailForm.quantity > 0) {
        this.detailForm.quantity--
      }
    },
    
    // 保存明细
    saveDetail() {
      if (!this.detailForm.itemId) {
        uni.showToast({ title: '请先选择物料', icon: 'none' })
        return
      }
      
      if (!this.detailForm.quantity || this.detailForm.quantity <= 0) {
        uni.showToast({ 
          title: '请输入有效的转移数量', 
          icon: 'none',
          duration: 3000
        })
        return
      }
      
      const isEdit = !!this.detailForm.detailId
      uni.showLoading({ title: isEdit ? '保存中...' : '添加明细中...' })
      
      const apiCall = isEdit 
        ? updateTransferdetail(this.detailForm)
        : addTransferdetail(this.detailForm)
      
      apiCall.then(response => {
        uni.showToast({ 
          title: isEdit ? '修改成功' : '添加明细成功', 
          icon: 'success',
          duration: 2000
        })
        
        this.hidePickingModal()
        this.loadLineDetails(false, false)
      }).catch(error => {
        console.log('操作失败:', error)
        
        if (error === '500') {
          console.log('业务错误，拦截器已显示toast')
        } else {
          uni.showToast({ 
            title: '网络异常，请检查网络连接后重试', 
            icon: 'none',
            duration: 3000
          })
        }
      }).finally(() => {
        uni.hideLoading()
      })
    },
    
    // 编辑明细
    editDetail(detail) {
      if (detail.itemStatus !== 0) {
        uni.showToast({ title: '只能编辑未拣货的数据', icon: 'none' })
        return
      }
      
      this.detailForm = {
        detailId: detail.detailId,
        lineId: this.lineId,
        transferId: this.transferId,
        itemId: detail.itemId,
        itemCode: detail.itemCode,
        itemName: detail.itemName,
        specification: detail.specification,
        unitOfMeasure: detail.unitOfMeasure,
        unitName: detail.unitName,
        quantity: detail.quantity,
        batchId: detail.batchId,
        batchCode: detail.batchCode,
        sn: detail.sn,
        outWarehouseId: detail.outWarehouseId,
        outWarehouseCode: detail.outWarehouseCode,
        outWarehouseName: detail.outWarehouseName,
        outLocationId: detail.outLocationId,
        outLocationCode: detail.outLocationCode,
        outLocationName: detail.outLocationName,
        outAreaId: detail.outAreaId,
        outAreaCode: detail.outAreaCode,
        outAreaName: detail.outAreaName,
        remark: detail.remark,
        fSnId: detail.fSnId,
      }
      
      this.showPicking = true
    },
    
    // 删除明细
    deleteDetail(detail) {
      if (detail.itemStatus !== 0) {
        uni.showToast({ title: '只能删除未拣货的数据', icon: 'none' })
        return
      }
      
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条明细吗？',
        confirmColor: '#FF0000',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '删除中...' })
            
            delTransferdetail(detail.detailId).then(response => {
              uni.showToast({ 
                title: '删除成功', 
                icon: 'success',
                duration: 2000
              })
              
              this.loadLineDetails(false, false)
            }).catch(error => {
              console.log('删除失败:', error)
              
              if (error === '500') {
                console.log('业务错误，拦截器已显示toast')
              } else {
                uni.showToast({ 
                  title: '网络异常，请检查网络连接后重试', 
                  icon: 'none',
                  duration: 3000
                })
              }
            }).finally(() => {
              uni.hideLoading()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.line-detail-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 12rpx;
    
    .page-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .transfer-code {
    font-size: 24rpx;
    color: #666;
    background: #f8f9fa;
    padding: 8rpx 12rpx;
    border-radius: 8rpx;
  }
}

.line-overview {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .overview-header {
    margin-bottom: 16rpx;
    
    .header-left {
      display: flex;
      align-items: center;
      gap: 16rpx;
      
      .overview-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }
      
      .line-status {
        padding: 6rpx 12rpx;
        border-radius: 16rpx;
        font-size: 22rpx;
        font-weight: bold;
        
        &.status-pending {
          background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
          color: #d63031;
        }
        
        &.status-partial {
          background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
          color: #fff;
        }
        
        &.status-completed {
          background: linear-gradient(135deg, #55efc4 0%, #00b894 100%);
          color: #fff;
        }
        
        &.status-received {
          background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
          color: #fff;
        }
      }
    }
  }
  
  .overview-content {
    .content-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16rpx 20rpx;
      
      .grid-item {
        display: flex;
        flex-direction: column;
        
        .item-label {
          font-size: 22rpx;
          color: #666;
          margin-bottom: 6rpx;
        }
        
        .item-value {
          font-size: 24rpx;
          color: #333;
          font-weight: 500;
          word-break: break-all;
        }
        
        &.progress-item {
          grid-column: 1 / -1;
          
          .progress-info {
            display: flex;
            flex-direction: column;
            gap: 8rpx;
            
            .progress-text {
              font-size: 24rpx;
              color: #333;
              font-weight: 500;
            }
            
            .progress-bar {
              height: 8rpx;
              background: #e9ecef;
              border-radius: 4rpx;
              overflow: hidden;
              
              .progress-fill {
                height: 100%;
                background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
                border-radius: 4rpx;
                transition: width 0.3s ease;
              }
            }
          }
        }
      }
    }
  }
}

.add-picking-section {
  margin-bottom: 20rpx;
  
  .add-picking-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    padding: 24rpx;
    border-radius: 12rpx;
    border: none;
    font-size: 28rpx;
    font-weight: bold;
    background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
    color: #fff;
    box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
    transition: all 0.3s ease;
    
    &:active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
    }
    
    .btn-text {
      font-size: 28rpx;
      font-weight: bold;
    }
  }
}

.details-section {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    
    .section-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }
    
    .section-count {
      font-size: 24rpx;
      color: #666;
    }
  }
  
  .details-list {
    .detail-item {
      background: #fff;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 16rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        padding-bottom: 12rpx;
        border-bottom: 1rpx solid #f0f0f0;
        
        .item-title {
          display: flex;
          align-items: center;
          gap: 12rpx;
          
          .item-number {
            font-size: 20rpx;
            color: #999;
            background: #f5f5f5;
            padding: 4rpx 8rpx;
            border-radius: 6rpx;
            min-width: 32rpx;
            text-align: center;
          }
          
          .item-identifier {
            font-size: 26rpx;
            font-weight: bold;
            color: #333;
          }
        }
        
        .item-status {
          padding: 6rpx 12rpx;
          border-radius: 12rpx;
          font-size: 22rpx;
          font-weight: bold;
          
          &.status-pending {
            background: #ffeaa7;
            color: #d63031;
          }
          
          &.status-sent {
            background: #74b9ff;
            color: #fff;
          }
          
          &.status-received {
            background: #55efc4;
            color: #fff;
          }
        }
      }
      
      .item-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12rpx;
        margin-bottom: 16rpx;
        
        .info-row {
          display: flex;
          flex-direction: column;
          
          .info-label {
            font-size: 22rpx;
            color: #666;
            margin-bottom: 4rpx;
          }
          
          .info-value {
            font-size: 24rpx;
            color: #333;
            font-weight: 500;
          }
        }
      }
      
      .shipment-info {
        margin-bottom: 16rpx;
        
        .info-section-title {
          display: flex;
          align-items: center;
          gap: 8rpx;
          margin-bottom: 12rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: #333;
        }
        
        .info-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12rpx;
          
          .info-item {
            display: flex;
            flex-direction: column;
            
            .info-label {
              font-size: 22rpx;
              color: #666;
              margin-bottom: 4rpx;
            }
            
            .info-value {
              font-size: 24rpx;
              color: #333;
              font-weight: 500;
            }
          }
        }
      }
      
      .item-actions {
        display: flex;
        gap: 12rpx;
        flex-wrap: wrap;
        margin-top: 16rpx;
        padding-top: 16rpx;
        border-top: 1rpx solid #f0f0f0;
        
        .action-btn {
          display: flex;
          align-items: center;
          gap: 6rpx;
          padding: 10rpx 16rpx;
          border-radius: 8rpx;
          font-size: 22rpx;
          font-weight: bold;
          border: none;
          
          &.edit-btn {
            background: #007AFF;
            color: #fff;
          }
          
          &.delete-btn {
            background: #ff3b30;
            color: #fff;
          }
          
          &.send-btn {
            background: #34c759;
            color: #fff;
          }
          
          &:active {
            transform: translateY(1rpx);
          }
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
  
  .empty-text {
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #999;
  }
}

// ========== 拣货模态框样式 ==========
.picking-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  
  .modal-content {
    width: 90%;
    max-width: 600rpx;
    max-height: 80vh;
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #eee;
    background: #f8f9fa;
    
    .modal-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .modal-body {
    flex: 1;
    padding: 20rpx 30rpx;
    overflow-y: auto;
  }
  
  .modal-footer {
    display: flex;
    gap: 20rpx;
    padding: 30rpx;
    border-top: 1rpx solid #eee;
    background: #f8f9fa;
    
    .modal-btn {
      flex: 1;
      height: 70rpx;
      border-radius: 35rpx;
      border: none;
      font-size: 28rpx;
      font-weight: bold;
      
      &.cancel-btn {
        background: #f8f9fa;
        color: #666;
        border: 1rpx solid #ddd;
      }
      
      &.confirm-btn {
        background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
        color: #fff;
      }
    }
  }
}

.material-section, .warehouse-section {
  margin-bottom: 30rpx;
  
  .section-title {
    font-size: 26rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
    padding-bottom: 8rpx;
    border-bottom: 2rpx solid #007AFF;
  }
}

.form-row {
  display: flex;
  gap: 15rpx;
  margin-bottom: 20rpx;
}

.form-group {
  margin-bottom: 20rpx;
  
  &.half-width {
    flex: 1;
    margin-bottom: 0;
  }
  
  &.required .form-label::after {
    content: '*';
    color: #ff4757;
    margin-left: 4rpx;
  }
  
  .form-label {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
  }
  
  .form-input {
    width: 100%;
    height: 60rpx;
    padding: 0 15rpx;
    border: 1rpx solid #ddd;
    border-radius: 6rpx;
    font-size: 24rpx;
    background: #f8f9fa;
    
    &:focus {
      border-color: #007AFF;
      background: #fff;
    }
  }
  
  .form-input-group {
    display: flex;
    gap: 10rpx;
    
    .form-input {
      flex: 1;
    }
    
    .search-btn {
      width: 60rpx;
      height: 60rpx;
      border: 1rpx solid #007AFF;
      border-radius: 6rpx;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      
      &.disabled {
        border-color: #ccc;
        background: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.6;
      }
    }
  }
  
  .form-textarea {
    width: 100%;
    min-height: 120rpx;
    padding: 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
    font-size: 26rpx;
    resize: vertical;
  }
}

.quantity-input {
  display: flex;
  align-items: center;
  border: 1rpx solid #007AFF;
  border-radius: 8rpx;
  overflow: hidden;
  background: #fff;
  
  .quantity-btn {
    width: 60rpx;
    height: 60rpx;
    border: none;
    background: transparent;
    font-size: 28rpx;
    font-weight: bold;
    color: #007AFF;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &:active {
      background: #f0f8ff;
    }
  }
  
  .quantity-btn:first-child {
    border-right: 1rpx solid #007AFF;
  }
  
  .quantity-btn:last-child {
    border-left: 1rpx solid #007AFF;
  }
  
  .quantity-value {
    width: 140rpx;
    height: 60rpx;
    text-align: center;
    border: none;
    font-size: 26rpx;
    background: transparent;
    
    appearance: none;
    /* 隐藏数字输入箭头 */
    -moz-appearance: textfield;
    
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    &:focus {
      background: #fff;
    }
  }
}

</style>

